<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
    <style>
        .父级盒子 {
            width: 500px; /* 宽高 背景色 */
            height: 500px;
            background-color: pink;
        }

        .子级盒子 {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>
<body>
<h3>事件冒泡</h3>
<p>
    事件冒泡概念: <br>
    当一个元素的事件被触发时，同样的事件将会在该元素的所有 祖先 元素中依次被触发。 <br>
    这一过程被称为事件冒泡
</p>
<p>
    简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件(事件类型) <br>
    事件冒泡是默认存在的 <br>
    DOM L2版本 事件监听第三个参数是 false，或者默认都是冒泡
</p>
<hr>

<div class="父级盒子">
    <div class="子级盒子"></div>
</div>

<script>
    //获取 DOM元素
    const 父级盒子 = document.querySelector('.父级盒子')
    const 子级盒子 = document.querySelector('.子级盒子')

    /*
    document --> 父级盒子 --> 子级盒子  //  事件 捕获阶段
    子级盒子 --> 父级盒子 --> document  // 事件 冒泡阶段
     */

    // document 是根DOM元素
    document.addEventListener('click', function () {
        alert('我是, 整个页面')
    }, false) // 使用事件冒泡, 第三个参数 false
    父级盒子.addEventListener('click', function () {
        alert('我是,父级盒子')
    }, ) // false 是默认参数, 可以不写
    子级盒子.addEventListener('click', function () {
        alert('我是,子级盒子')
    }, )

    // 注意: 事件类型 要相同
    // 点击盒子,看弹窗经过. 你点那个盒子,会显示从 盒子到根的 冒泡过程

</script>
</body>
</html>